import { useEffect, useState, useMemo, Fragment } from "react"
import * as api from "@/api/product"
import { Table, Image, Button } from "antd"
import Dialog from "@/components/Dialog"
import { DeleteOutlined, EditOutlined, EyeOutlined } from "@ant-design/icons"

const ProductCategory = () => {
    let [category, setCategory] = useState([])
    //控制dialog显示 隐藏
    let [visible, setVisible] = useState(false)

    let getCategoryList = () => {
            api.getCategory()
            .then(res => {
                // console.log(res);
                setCategory([...res.data.data])
            })
    }

    useEffect(() => {
        getCategoryList()
    }, [category])
    //
    let dataSource = useMemo(() => {
        // console.log(category);
        return category.map(item => ({
            cImg: item.categoryImgurl,
            cId: item.category_id,
            cName: item.categoryName,
            cTime: item.createTime,
            cieator: item.creator,
            updateTime: item.updateTime,
            updator: item.updator,
            key: item._id,
        }))
    })
    // console.log(dataSource);

    let titles = ['类目图片', '类目id', '类目名称', '创建时间', '创建人', '更新时间', '更新人']

    let columns = useMemo(() => {
        let col = [];
        try {
            let keys = Object.keys(dataSource[0])
            col = titles.map((title, index) => {
                if (keys[index] === 'cImg') {
                    return {
                        title,
                        key: keys[index],
                        dataIndex: keys[index],
                        width: 100,
                        align: 'center',
                        render(v, r) {
                            //v 当前列数据
                            // console.log('v',v);
                            // console.log('r',r);
                            //r 当前行数据
                            return (
                                <Image width={50} src={v ? v : "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"}></Image>
                                // <button>000</button>
                            )
                        }
                    }
                } else {
                    return {
                        align: 'center',
                        title,
                        key: keys[index],
                        align: 'center',
                        dataIndex: keys[index]
                    }
                }

            })

            //最后一列定义几个操作按钮
            let lastColumnObj = {
                title: "操作",
                key: "operate",
                render() {
                    return (
                        <Fragment>
                            <Button icon={<EyeOutlined />}>查看</Button>
                            <Button icon={<EditOutlined />}>编辑</Button>
                            <Button danger icon={<DeleteOutlined />}>删除</Button>
                        </Fragment>
                    )
                }
            }
            //添加到数组末尾
            col.push(lastColumnObj)
            return col
        } catch (e) {
            console.log(e);
        }
    }, [category])
    // console.log(columns);

    let handleOk = (instance) => {
        console.log(instance)
        //调用表单提交的方法
        instance.current.submit()
        setVisible(false)
    }

    let handleCancel = () => {
        setVisible(false)
    }
    


    let handleAdd = () => {
        setVisible(true)
    }

    return (
        <Fragment>
            <Dialog onOk={handleOk} visible={visible} onCancel={handleCancel} handleGetCategory={getCategoryList}/>
            <Button type='primary' onClick={handleAdd}>点击添加</Button>
            <Table bordered dataSource={dataSource} columns={columns}></Table>
        </Fragment>
    )



}

export default ProductCategory